<template>
  <div>
    <div class="max-box">
      <!-- 详情页轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="blue">
        <van-swipe-item v-for="item in gallery" :key="item.id">
          <img :src="item.img_url" width="100%" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 包邮 -->
      <van-row>
        <van-col span="8">
          <van-icon name="checked" color="brown" />
          <span>30天无忧退货</span>
        </van-col>
        <van-col span="8">
          <van-icon name="checked" color="brown" />
          <span>48小时快速退费</span>
        </van-col>
        <van-col span="8">
          <van-icon name="checked" color="brown" />
          <span>满88元免邮费</span>
        </van-col>
      </van-row>
      <!-- 详情标题 -->
      <div class="title">
        <h3>{{ info.name }}</h3>
        <p class="p1">{{ info.goods_brief }}</p>
        <p class="p2">{{ info.retail_price | RMBformat }}</p>
      </div>
      <!-- 弹出层 -->
      <div class="van-sku" @click="isshow = true">
        展示弹出层
        <span>></span>
      </div>
      <van-sku
        v-model="isshow"
        :sku="sku"
        ref="sku"
        :goods="goods"
        :hide-stock="sku.hide_stock"
      />
      <!-- 商品参数 -->
      <div class="canshu">
        <h3>商品参数</h3>
        <ul>
          <li v-for="(item, index) in attribute" :key="index">
            <div class="van-ellipsis">
              <i>{{ item.name }}</i
              ><span>{{ item.value }}</span>
            </div>
          </li>
        </ul>
      </div>
      <!-- 商品详情列表 -->
      <div v-html="info.goods_desc" class="goods_desc"></div>
      <!-- 常见问题 -->
      <div class="alawys">
        <span></span>
        <h3>常见问题</h3>
      </div>
      <ul class="u1">
        <li v-for="item in issue" :key="item.id">
          <i>{{ item.question }}</i>
          <p>{{ item.answer }}</p>
        </li>
      </ul>
      <!-- 大家都在看 -->
      <div class="alawys">
        <span></span>
        <h3>大家都在看</h3>
      </div>
      <div class="search_body">
        <dl
          v-for="item in goodsList"
          :key="item.id"
          @click="ProduceDeail(item.id)"
        >
          <dt>
            <img :src="item.list_pic_url" alt="" />
          </dt>
          <dd>{{ item.name }}</dd>
          <dd class="d2">{{ item.retail_price | RMBformat }}</dd>
        </dl>
      </div>
    </div>

    <AppGoodsAction @changeButton="changeButton" :goodsCount="goodsCount" />
  </div>
</template>

<script>
import AppGoodsAction from "@/components/AppGoodsAction";
import {
  GetProductDetailData,
  GetxiangGaun,
  addToCart,
  AddCart
} from "@/request/api";
export default {
  data() {
    return {
      isshow: false,
      sku: {
        tree: [],
        hide_stock: false,
        price: "1.00", // 默认价格（单位元）
        stock_num: 227 // 商品总库存
      },
      goods: {
        picture: ""
      },

      gallery: [],
      info: [],
      attribute: [],
      issue: [],
      goodsList: [],

      goodsCount: [],
      productList: []
    };
  },
  created() {
    GetProductDetailData({
      id: this.$route.query.id
    }).then(res => {
      if (res.errno == "0") {
        // console.log(res.data);
        this.gallery = res.data.gallery;
        this.info = res.data.info;
        this.attribute = res.data.attribute;
        this.issue = res.data.issue;
        this.productList = res.data.productList;

        //sku渲染数据
        this.sku.price = res.data.info.retail_price;
        this.sku.stock_num = res.data.info.goods_number;
        this.goods.picture = res.data.info.list_pic_url;
      }
    });
    GetxiangGaun({
      id: this.$route.query.id
    }).then(res => {
      if (res.errno == "0") {
        console.log(res.data);
        this.goodsList = res.data.goodsList;
      }
    });
    addToCart().then(res => {
      // console.log(res);
      this.goodsCount = res.data.cartTotal.goodsCount;
    });
  },
  components: {
    AppGoodsAction
  },
  methods: {
    changeButton() {
      if (this.isshow) {
        let selecteNum = this.$refs.sku.getSkuData().selectedNum;
        console.log(this.$refs.sku.selectedNum);
        AddCart({
          goodsId: this.$route.query.id,
          productId: this.productList[0].id,
          number: selecteNum
        }).then(res => {
          console.log(res);
          this.goodsCount = res.data.cartTotal.goodsCount;
          setTimeout(() => {
            this.$router.push("/cart");
          }, 1000);
        });
      }
      this.isshow = !this.isshow;
    },
    ProduceDeail(val) {
      this.$router.push("/ProduceDeail?id=" + val);
      setTimeout(() => {
        this.$router.go(0);
      });
    }
  }
};
</script>
 
<style lang = "less" scoped>
.van-swipe-item {
  /deep/img {
    width: 100%;
  }
}

.van-col {
  text-align: center;
  background-color: #eee;
  padding: 0.04rem 0;
}
.van-col span {
  vertical-align: text-top;
}
.title {
  text-align: center;
  background-color: #fff;
  padding: 0.266667rem 0;
  line-height: 0.4rem;
  h3 {
    font-size: 0.186667rem;
  }
  .p1 {
    color: rgb(150, 147, 147);
  }
  .p2 {
    color: brown;
  }
}
.van-sku {
  background-color: #fff;
  width: 100%;
  line-height: 0.466667rem;
  border-top: 1px solid #ccc;
  padding: 0 0.133333rem;
  box-sizing: border-box;
  span {
    text-align: right;
  }
}
.max-box {
  padding-bottom: 0.533333rem;
}
.canshu {
  margin-top: 0.2rem;
  padding: 0.266667rem 0.133333rem 0.2rem;
  background-color: #fff;
  h3 {
    font-size: 0.16rem;
  }
  ul {
    padding: 0.066667rem 0.04rem;
    li {
      margin-top: 0.133333rem;
      background-color: #eee;
      padding: 0.066667rem 0.533333rem;
      i {
        font-size: 0.106667rem;
        color: rgb(141, 139, 139);
        margin-right: 0.093333rem;
      }
      span {
        font-size: 0.16rem;
      }
    }
  }
}
.van-ellipsis {
  padding: 0.066667rem;
}
.goods_desc {
  /deep/img {
    width: 100%;
    margin: -0.013333rem;
  }
}
.alawys {
  background-color: #fff;
  padding: 0.266667rem;
  position: relative;
  left: 0;
  top: 0;
  margin-top: 0.2rem;
  h3 {
    position: absolute;
    left: 0;
    right: 0;
    top: 38%;
    margin: auto;
    width: 30%;
    background: #fff;
    text-align: center;
    font-size: 0.16rem;
  }
  span {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 2px;
    width: 50%;
    background: #ccc;
  }
}
.u1 {
  padding: 0 0.133333rem;
  background-color: #fff;
  li {
    display: list-item;
    list-style: inside square;
    i {
      font-size: 0.16rem;
    }
    p {
      font-size: 0.106667rem;
      padding: 0.16rem;
      color: rgb(122, 121, 121);
    }
  }
}
.search_body {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  dl {
    width: 50%;
    background-color: #fff;
    dt {
      img {
        width: 100%;
      }
    }
    dd {
      text-align: center;
      margin-bottom: 0.166667rem;
    }
    .d2 {
      color: brown;
    }
  }
}
</style>